<template>
    <view style="height: 100%;width: 100%;overflow: hidden">
        <scroll-view
            style="height: 100%;width: 100%;"
            :refresher-triggered="triggered"
            lower-threshold="10"
            @refresherpulling="onPulling"
            @refresherrefresh="onRefresh"
            @scrolltolower="scrolltolower"
            scroll-y
            refresher-enabled
        >
            <view v-if="systemMsgList.length">
                <view class="system-msg" v-for="(item, index) in systemMsgList" :key="index">
                    <view v-if="item">
                        <view class="system-time" style="margin: 10px">
                            <text >{{ item.time }}  {{ item.week }}</text>
                        </view>
                        <!--     删除设备     -->
                        <view class="system-msg-card" v-for="(item2, index2) in item.list" :key="index2">
                            <view class="msg-card-time">{{ item2.time }}</view>
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='deviceDel'">
                                设备 <text class="color-font">[{{ item2.logInfo.props[0].propValue.deviceName }}]</text> 已被
                                <text v-if="item2.logInfo.props[0].propValue.userId == userInfo.id">当前账号</text>
                                <text v-else>用户 <text class="color-font">[{{item2.logInfo.props[0].propValue.nickName}}]</text></text>移除
                            </view>
                            <!--     添加设备     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='deviceAdd'">
                                设备 <text class="color-font">[{{ item2.logInfo.props[0].propValue.deviceName }}]</text> 已被
                                <text v-if="item2.logInfo.props[0].propValue.userId == userInfo.id">当前账号</text>
                                <text v-else>用户 <text class="color-font">[{{item2.logInfo.props[0].propValue.nickName}}]</text></text>
                                添加到家庭<text class="color-font">[{{ item2.logInfo.props[0].propValue.userGroupName }}]</text>中
                            </view>
                            <!--     删除家庭组     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='userGroupDel'">
                                <text v-if="item2.logInfo.props[0].propValue.userId == userInfo.id">您</text>
                                <text v-else>用户<text class="color-font">[{{ item2.logInfo.props[0].propValue.nickName }}]</text></text>
                                已将家庭<text class="color-font">[{{ item2.logInfo.props[0].propValue.userGroupName }}]</text>删除
                            </view>
                            <!--     删除用户/用户退出家庭组     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='userDel'">
                                <text v-if="item2.logInfo.props[0].propValue.userId == item2.logInfo.props[0].propValue.delByUserId">
                                    <text v-if="item2.logInfo.props[0].propValue.userId == userInfo.id">您</text>
                                    <text v-else>用户 <text class="color-font">[{{ item2.logInfo.props[0].propValue.nickName }}]</text></text>
                                    已退出家庭 <text class="color-font">[{{ item2.logInfo.props[0].propValue.userGroupName }}]</text>
                                </text>
                                <text v-else>
                                    <text v-if="item2.logInfo.props[0].propValue.userId == userInfo.id">您</text>
                                    <text v-else>用户 <text class="color-font">{{'['+ item2.logInfo.props[0].propValue.nickName +']'}}</text></text>已被
                                    <text v-if="item2.logInfo.props[0].propValue.delByUserId == userInfo.id">当前帐号</text>
                                    <text v-else>用户<text class="color-font">[{{ item2.logInfo.props[0].propValue.delBy }}]</text></text>
                                    从家庭<text class="color-font">[{{ item2.logInfo.props[0].propValue.userGroupName }}]</text>中移除
                                </text>
                            </view>
                            <!--     设备恢复出厂设置     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='deviceReset'">
                                设备<text class="color-font">[{{ item2.logInfo.props[0].propValue.deviceName }}]</text>已被恢复出厂设备，并从当前帐号删除
                            </view>
                            <!--     邀请用户加入家庭     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='inviteUser'">
                                <text class="color-font">{{ item2.logInfo.props[0].propValue.inviterUserId == userInfo.id ? '当前用户' : '用户[' + item2.logInfo.props[0].propValue.inviterNickName + ']' }}</text>
                                邀请<text class="color-font">{{ item2.logInfo.props[0].propValue.userId == userInfo.id ? '当前用户' : '用户[' + item2.logInfo.props[0].propValue.nickName + ']' }}</text>
                                加入家庭<text class="color-font">{{ item2.logInfo.props[0].propValue.userGroupName }}</text>
                            </view>
                            <!--     用户同意加入家庭     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='acceptInvite'">
                                <text class="color-font">{{ item2.logInfo.props[0].propValue.userId == userInfo.id ? '当前用户' : '用户[' + item2.logInfo.props[0].propValue.nickName + ']' }}</text>
                                已同意加入<text class="color-font">{{ item2.logInfo.props[0].propValue.inviterUserId == userInfo.id ? '当前用户' : '用户[' + item2.logInfo.props[0].propValue.inviterNickName + ']' }}</text>
                                的家庭<text class="color-font">{{ item2.logInfo.props[0].propValue.userGroupName }}</text>
                            </view>
                            <!--     用户拒绝加入家庭     -->
                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode=='refuseInvite'">
                                <text class="color-font">{{ item2.logInfo.props[0].propValue.userId == userInfo.id ? '当前用户' : '用户[' + item2.logInfo.props[0].propValue.nickName + ']' }}</text>
                                已拒绝加入<text class="color-font">{{ item2.logInfo.props[0].propValue.inviterUserId == userInfo.id ? '当前用户' : '用户[' + item2.logInfo.props[0].propValue.inviterNickName + ']' }}</text>
                                的家庭<text class="color-font">{{ item2.logInfo.props[0].propValue.userGroupName }}</text>
                            </view>
<!--                            <view class="msg-card-content" v-if="item2.logInfo.props[0].propCode">您被用户<text class="color-font">[用户03]</text>邀请加入家庭</view>-->
                        </view>
                    </view>
                </view>
                <view v-if="loadingFlag===1" style="text-align: center;font-size: 14px;padding-bottom: 32rpx"><text>加载中...</text></view>
                <view v-else-if="loadingFlag===2" style="text-align: center;font-size: 14px;padding-bottom: 32rpx"><text>没有更多数据了。</text></view>
                <view v-else></view>
            </view>
            <view class="no-message-box" style="width: 100%;height: 100%" v-else>
                <view class="no-message">
                    <view class="no-message-img">
                        <image src="https://statics.xmcsrv.net/weixin/noMessage.png"></image>
                    </view>
                    <view class="no-message-text">
                        <text>暂无通知消息</text>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script>
export default {
    name: "msgCard",
    props: {
        systemMsgList: {
            type: Array,
            default: []
        },
        device: {
            type: Object,
            default: {}
        },
        systemMsgNum: {
            type: Number,
            default: 0
        }
    },
    mounted() {
        this.userInfo = uni.getStorageSync('userInfo')
    },
    watch: {
        systemMsgList(n, o) {
            if(n.length) {
            }
            console.log(n, 'msglist')
        }
    },
    data() {
        return {
            alarmMsg: [
                { propCode: 'deviceDel' },
                { propCode: 'deviceAdd' },
                { propCode: 'deviceDel' },
                { propCode: 'deviceDel' },
                { propCode: 'deviceDel' },
                { propCode: 'deviceDel' },
                { propCode: 'deviceDel' },
            ],
            page: 1,
            limit: 10,
            triggered: false,
            loadingFlag: 0,
            userInfo: null
        }
    },
    methods: {
        // 自定义下拉刷新控件被下拉
        onPulling(e) {
            if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
            this.triggered = true;
        },
        // 下拉刷新
        onRefresh() {
            this.page = 1
            const data = {
                page: this.page,
                limit: this.limit,
                // deviceSn: this.device.deviceNo
            }
            setTimeout(() => {
                this.triggered = false
            }, 1000)
            this.$emit('getNextPage', data)
        },
        scrolltolower() {
            if(this.loadingFlag === 2) return
            this.loadingFlag = 1
            this.page++
            const data = {
                page: this.page,
                limit: this.limit,
                // deviceSn: this.device.deviceNo
            }
            console.log(data, '上拉加载传递的参数')
            this.$emit('getNextPage', data)
        }
    }
}
</script>

<style scoped lang="less">
.system-msg {
    font-size: 14px;
    color: #9c9c9c;
    padding-bottom: 20rpx;
    .system-msg-card {
        width: 95%;
        //height: 75px;
        margin: 20rpx auto;
        box-sizing: border-box;
        border-radius: 8px;
        background-color: #fff;
        padding: 10px 12px;
        .msg-card-time {
            margin-bottom: 10px;
            font-size: 14px;
        }
        .msg-card-content {
            color: #000;
            font-size: 15px;
        }
    }
}
.color-font {
    color: #1AC0BA;
}
.no-message-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .no-message {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .no-message-img {
            width: 360rpx;
            height: 360rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .no-message-text {
            font-size: 16px;
            color: #9c9c9c;
        }
    }
}
</style>